import { FC } from "react"
type Icomment = {
    date: string;
    text: string;
    author: {
        name: string;
        avatarUrl: string
    }
}
// 将类型变成可选
type Iprops<T> = {
    [k in keyof T]?: T[k]
}
const comment: Icomment = {
    date: new Date().toLocaleTimeString(),
    text: '我希望你能愉快的学习react',
    author: {
        name: 'Hello Kitty',
        avatarUrl: 'http://placekitten.com/g/64/64'
    }
};
// 提取Avatar组件
type authorProps = {
    author: {
        name: string;
        avatarUrl: string
    }
}
let Avatar: FC<authorProps> = (props) => {
    props: { }
    return (
        <img className="Avatar"
            src={props.author!.avatarUrl}
            alt={props.author!.name}
        />
    )
}
let UserInfo:FC<authorProps> =(props)=> {
    return(
        <div className = "UserInfo" >
            {/* Avatar组件 */ }
            < Avatar author = { props.author! } />
                <div className="UserInfo-name">
                    {props.author?.name}
                </div>
    </div >
    )
}

let Comment: FC<Iprops<Icomment>> = (props) => {
    return (
        <div className="Comment">
            {/* UserInfo组件 */}
            <UserInfo author={props.author!}/>
            <div className="Comment-text">
                {props.text}
            </div>
            <div className="Comment-date">
                {props.date}
            </div>
        </div>
    );
}
Comment.defaultProps = comment;
export default Comment